import React, { useState } from 'react'
import { connect } from 'react-redux'
import { nanoid } from 'nanoid'
import { actions } from '../../store/reducers/person'

function Person(props) {
  const [form, setForm] = useState({})

  const onChangeValue = e => {
    const { name, value } = e.target
    setForm({ ...form, [name]: value })
  }

  const addPerson = () => {
    console.log({ id: nanoid(), ...form })
    props.add({ id: nanoid(), ...form })
  }

  return (
    <div>
      <h1>我是Person组件，上方组件和为{props.count}</h1>
      <input type='text' name='name' placeholder='请输入姓名' onChange={onChangeValue} />
      <input type='text' name='age' placeholder='请输入年龄' onChange={onChangeValue} />
      <button onClick={addPerson}>添加</button>
      <ul>
        {props.person &&
          props.person.map(v => (
            <li key={v.id}>
              {v.name}----{v.age}
            </li>
          ))}
      </ul>
    </div>
  )
}

export default connect(
  state => ({
    ...state
  }),
  {
    add: actions.add
  }
)(Person)
